<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*选择器*/
			.element-div > p {
				color: maroon;
			}
			.element-div em {
				font-weight: bold;
			}
			
			
			/*类选择器*/
			.important {font-weight:bold;}
			.warning {font-style:italic}
			.important.warning {background:silver;}

			/*ID选择器*/


			/*简单属性选择器*/
			.attr-div [href]{
				color: red;
			}
			/*简单属性选择器 多个属性选择*/
			.attr-div a[href][title]{
				color:green;
				font-style: italic;
			}

			/*伪类*/
			.pseudo-class-div a:link {
				color: yellow;
			}
			.pseudo-class-div a:visited { 
				font-style: italic;
				color: green;
				text-decoration: line-through;
			}

			
			
/* 			a:link{
				color: yellow;
				font-style: italic;
			}

			a:visited {
				color: silver;
				font-style: italic;
			} */
			
			/* 伪元素*/
			.pseudo-element-div h3::first-letter {
				color: red;
			}
			.pseudo-element-div p::first-line {
				color: red;
				font-style: italic;
			}
			.pseudo-element-div div::before{
				content: "{";
				color: maroon;
			}
			.pseudo-element-div div::after{
				content: "}";
				color: maroon;
			}
			
		</style>
	</head>
	<body>
		<h1>选择器</h1>
		<!-- 元素选择器测试 -->
		<div class="element-div">
			<h2>元素选择器</h2>
			<p class="group1 group2">
			元素选择器<em>分组</em>
			</p>
			
		</div>
		<hr/>


		<!-- 属性选择器测试 -->
		<div class="attr-div">
			<h2>属性选择器</h2>
			<a>测试一下</a>
			<a href="#">测试简单选择器</a>
			<a href="#" title="测试">测试简单选择器</a>
		</div>
		<hr/>

		<!-- 伪类选择器测试-->
		<div class="pseudo-class-div">
			<h2>伪类</h2>
			<a href="https://caniuse.com/">can i see</a>
			<a href="http://www.sohu.com">百度</a>
		</div>
		<hr/>

		<!-- 伪元素选择器测试-->
		<div class="pseudo-element-div">
			<h2>伪元素</h2>
			<h3>设置首字母样式</h3>
			<p>长文本第一行的样式修改xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxs</p>
			<div>设置之前和之后的样式</div>
		</div>


	</body>
</html>
